$(function () {
      $(function () {
            // 需求1: 渲染文章分类列表;
            //     后面还要用，所以封装成函数！
            let form = layui.form;
            initArtCateList();
            function initArtCateList() {
                  // 发送ajax
                  axios({
                        method: 'GET',
                        url: '/my/article/cates'
                  }).then(res => {
                        if (res.data.status != 0) {
                              return layer.msg(res.data.message);
                        }
                        // 初始化
                        let arr = ['<option value="">请选择文章类别</option>'];
                        res.data.data.forEach(ele => {
                              arr.push(`<option value="${ele.Id}">${ele.name}</option>`);
                        });
                        // 循环完毕后，在渲染
                        $("[name=cate_id]").empty().html(arr.join(''));
                        form.render();
                  });
            }

            // 2.初始化富文本编辑器
            initEditor();

            // 3.1. 初始化图片裁剪器
            var $image = $('#image')
            // 3.2. 裁剪选项
            var options = {
                  aspectRatio: 400 / 280,
                  preview: '.img-preview'
            }
            // 3.3. 初始化裁剪区域
            $image.cropper(options)

            // 需求5: 生成 state 
            // 状态，可选值为：已发布、草稿
            let state = "";
            $("#btn1").on('click', function () {
                  state = '已发布';
            })
            $("#btn2").on('click', function () {
                  state = '草稿';
            })

            // 需求6: 点击按钮，选择图片，渲染到页面;
            $("#chooaeIgeImageBtn").on('click', function () {
                  $("#chooaeIgeInp").click();
            })
            $("#chooaeIgeInp").on('change', function (e) {
                  // 1. 拿到用户选择的文件
                  var file = e.target.files[0]
                  // 非空判断
                  if (file == undefined) {
                        return;
                  }
                  // 2. 根据选择的文件，创建一个对应的 URL 地址：
                  var newImgURL = URL.createObjectURL(file)
                  // 3. 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
                  $image
                        .cropper('destroy')      // 销毁旧的裁剪区域
                        .attr('src', newImgURL)  // 重新设置图片路径
                        .cropper(options)        // 重新初始化裁剪区域
            })

            // 需求4: 提交表单;
            $("#formPub").on('submit', function (e) {
                  // 阻止默认行为
                  e.preventDefault();
                  // 生成FormData对象;
                  let fd = new FormData(this); // 参数可以是一个 DOM 对象;
                  // 添加状态
                  fd.append('state', state); // 属性是字符串，值是变量！
                  // cropper生成二进制的文件对象；
                  $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                        width: 400,
                        height: 280
                  }).toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                        // 得到文件对象后，进行后续的操作
                        fd.append('cover_img', blob);
                        // 发送ajax, 一定要写道toBlob()函数里面
                        axios({
                              method: 'POST',
                              url: '/my/article/add',
                              data: fd
                        }).then(res => {
                              if (res.data.status != 0) {
                                    return layer.msg(res.data.message);
                              }
                              // 成功提示
                              layer.msg('恭喜您，添加文章成功！');
                              setTimeout(function () {
                                    window.parent.document.querySelector('#art_list').click();
                              }, 100);
                        });
                  });
            })





      });

})
